<!--
 * @Author: 肖芬芳 1911683843@qq.com
 * @Date: 2022-11-17 11:40:09
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-13 16:34:51
 * @FilePath: \blog\src\views\admin\home\components\PersonInfoIco.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 消息组件 -->

  <el-dropdown>
    <span class="el-dropdown-link">
      <el-icon class="personInfo-ico">
        <CaretBottom />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="showPersonInfo"> 个人中心 </el-dropdown-item>
        <el-dropdown-item @click="modifyPasswordDialogVisible = true">
          修改密码
        </el-dropdown-item>
        <el-dropdown-item @click="logout"> 退出登陆 </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <!-- 个人中心对话框 -->
  <el-dialog
    v-model="personInfoDialogVisible"
    title="个人中心"
    :close-on-click-modal="false"
  >
    <el-form
      :inline="true"
      :model="piFormData"
      class="search-form"
      label-width="100px"
    >
      <el-row v-for="(items, index) in piFormItem" :key="index">
        <el-col v-for="(item, i) in items" :key="i" :span="item.width">
          <el-form-item :key="i" :label="item.label" :prop="item.value">
            {{
              piFormData[item.value] == undefined
                ? "*****"
                : piFormData[item.value]
            }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="width: 100%; border: 1px solid #f0f2f5"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="personInfoDialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改密码对话框 -->
  <el-dialog
    v-model="modifyPasswordDialogVisible"
    title="修改密码"
    :close-on-click-modal="false"
  >
    <amForm
      ref="baseForm"
      :form-item="mpFormItem"
      :form-data="mpFormData"
    ></amForm>
    <div style="width: 100%; border: 1px solid #f0f2f5"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="modifyPasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="modifyPassword(baseForm.formRef)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { store } from "@/store";
import { ElMessage, ElMessageBox } from "element-plus";
import { getCurrentInstance } from "vue";
import {
  FormInstance, // 获取表单对象
  FormRules,
} from "element-plus";
import HomeServiceApi from "../api/homeServiceApi";
import UserServieApi from "@/views/admin/system/user/api/userServieApi";
import init from "./option";
import MpForm from "../params/modifyPassword";

const baseForm = ref<HTMLElement | any>();


const homeServiceApi = new HomeServiceApi();
const userServieApi = new UserServieApi();
const { proxy } = getCurrentInstance() as any;

// 个人信息表单数据
const personInfoDialogVisible = ref<boolean>(false);
const piFormData = ref();
const piFormItem = init.piFormItem;

// 修改密码表单数据
const modifyPasswordDialogVisible = ref<boolean>(false);
const mpFormData = ref<MpForm>({
  password: "",
  newPassword: "",
  confirmPassword: "",
});
const mpFormItem = init.mpFormItem;

// 退出登录
const logout = async () => {
  // 1、弹出确认看
  ElMessageBox.confirm("确认退出登陆？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    // 2、发送退出登陆请求
    const code:any= await homeServiceApi.logout({
      id: store.state.user ? store.state.user.id : null,
    });
    console.log(code);
    if (code === 0) {
      // 清除登陆缓存
      store.commit("removeUser");
      store.commit("removeToken");

      // 3、跳转到登录页面
      proxy.$router.push("/admin/login");
      ElMessage({
        type: "success",
        message: "退出成功",
      });
    } else {
      ElMessage({
        type: "error",
        message: "退出失败！",
      });
    }
  });
};

const showPersonInfo = async () => {
  const res = await userServieApi.detail(store.state.user.id);
  piFormData.value = res.data;
  personInfoDialogVisible.value = true;
};

// 校验确认密码
const isComfirmPassword = () => {
  if (mpFormData.value.confirmPassword == mpFormData.value.newPassword) {
    return true;
  } else {
    return false;
  }
};

const modifyPassword = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      if (isComfirmPassword()) {
        let formData:any = mpFormData.value;
        formData.id = store.state.user.id;
        const code:any = await homeServiceApi.modifyPassword(formData);
        formEl.resetFields();
        // baseForm.value.formRef.resetFields()  //也可以使用这个来获取formRef
        if (code == 0) {
          ElMessage.success("修改成功！");
          modifyPasswordDialogVisible.value = false;
        }
      } else {
        ElMessage.error("新密码和确认密码不一致！");
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/dialog.scss";
</style>

<style lang="scss" scoped>
.el-dropdown {
  vertical-align: middle !important;
  font-size: 20px !important;
  color: white !important;
}
</style>
